<template>
  <div class="app-container">
    <div style="text-align: center;margin-bottom: 20px;">
      <el-radio-group v-model="deviceName" size="large" @change="changeDevice">
        <el-radio-button label="电脑端" value="PC" />
        <el-radio-button label="手机端" value="SJ" />
      </el-radio-group>
    </div>

    <div :class="`de-main ${isMobile ? 'mobile' : ''}`">
      <div class="s-box">
        <h2 class="s-title">{{ survey.surveyName }}</h2>
        <div class="s-desc">
          {{ survey.surveyDesc }}
        </div>
      </div>
      <div class="s-quesitions">
        <Question 
          v-for="(question, i) in questionList" 
          :question="question" 
          :surveyId="surveyId" 
          :index="i"
          :key="question.questionNo"/>
      </div>

      <div class="s-btn">
        <el-button type="primary" disabled>提交</el-button>
        <el-button type="default" disabled>暂存</el-button>
      </div>
      <el-backtop v-if="!isMobile" :right="50" :bottom="50" />
    </div>
  </div>
</template>
<script>
import Question from './question/question_view.vue';
import { getSurvey } from "@/api/survey/survey";
import { listBySurveyId } from "@/api/survey/question";
export default {
  name: 'Preview',
  // dicts: [],
  components: { Question },
  data(){
    return {
      surveyId: this.$route.params.id,
      survey: {},
      questionList: [],
      deviceName: 'PC',
      isMobile: false,
    }
  },
  mounted(){
    this.surveyId = this.$route.params.id;
    this.getSurvey();
    this.getQuestionList();
  },
  methods:{
    /** 获取问卷对象 */
    getSurvey(){
      getSurvey(this.surveyId).then(response => {
        this.survey = response;
      });
    },
    /** 获取问题列表 */
    getQuestionList(){
      listBySurveyId(this.surveyId).then(response => {
        this.questionList = response;
      })
    },
    changeDevice(){
      if(this.deviceName === 'PC'){
        this.isMobile = false;
      }
      if(this.deviceName === 'SJ'){
        this.isMobile = true;
      }
    }
  }
}
</script>
<style>
.app-container{
  background: #f0f0f0;
  padding-top: 20px;
  padding-bottom: 80px;
  height: 100%;
}

.de-main{
  background:  #fff;
  width:  770px;
  margin: 0 auto;
  margin-top: 5px;
  min-height: 742px;
  position: relative;
  overflow-y: auto;
}
.de-main.mobile{
  background:  #fff;
  width: 390px;
  height: 742px;
  margin: 0 auto;
  margin-top: 5px;
  position: relative;
  overflow-y: auto;
}
.de-main .el-backtop{
  position: absolute;
}
.s-title{
  text-align: center;
  padding: 50px 0 40px 0;
  margin: 0;
}
.s-desc{
  text-indent: 2em;
  border-bottom: 1px solid #eaeaea;
  padding: 6px 20px;
}
.s-btn{
  text-align:center;
  padding-bottom: 50px;
}


</style>